<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
        }

        .Box,
        .Box2,
        .Box3,
        .Box4,
        .Box5,
        .Box6,
        .Box7,
        .Box8,
        .Box9 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            margin: 20px;
        }

        .Box {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .Box-A {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box2 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;
        }

        .Box2-A,
        .Box2-B {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box3 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }

        .Box3-A,
        .Box3-B,
        .Box3-C {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box3-A {
            align-self: flex-start;
            margin-top: 10px;
            margin-left: 10px;
        }

        .Box3-B {
            align-self: center;
        }

        .Box3-C {
            align-self: flex-end;
            margin-bottom: 10px;
            margin-right: 10px;
        }

        .Box4 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
        }

        .Box4-col {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .Box4-pip {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box5 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
        }

        .Box5-pip {
            display: flex;
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box5 .Box5-col {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .Box5 .Box5-pip:nth-child(2) {
            align-self: center;
        }

        .Box6 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .Box6-pip {
            display: flex;
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;

        }

        .Box6 .Box6-col {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .Box7 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .Box7-col {
            display: flex;
            justify-content: space-around;
        }

        .Box7-col.center {
            justify-content: center;
        }

        .Box7-pip {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }

        .Box8 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            position: relative;
        }

        .Box8-pip {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
        }

        .top-left {
            top: 5px;
            left: 5px;
        }

        .top-center {
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
        }

        .top-right {
            top: 5px;
            right: 5px;
        }

        .middle-left {
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
        }

        .middle-right {
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
        }

        .bottom-left {
            bottom: 5px;
            left: 5px;
        }

        .bottom-center {
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
        }

        .bottom-right {
            bottom: 5px;
            right: 5px;
        }

        .Box9 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0;
        }

        .Box9-col {
            display: flex;
            justify-content: space-around;
        }

        .Box9-pip {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="Box">
            <div class="Box-A"></div>
        </div>

        <div class="Box2">
            <div class="Box2-A"></div>
            <div class="Box2-B"></div>
        </div>

        <div class="Box3">
            <div class="Box3-A"></div>
            <div class="Box3-B"></div>
            <div class="Box3-C"></div>
        </div>

        <div class="Box4">
            <div class="Box4-col">
                <div class="Box4-pip"></div>
                <div class="Box4-pip"></div>
            </div>
            <div class="Box4-col">
                <div class="Box4-pip"></div>
                <div class="Box4-pip"></div>
            </div>
        </div>

        <div class="Box5">
            <div class="Box5-col">
                <div class="Box5-pip"></div>
                <div class="Box5-pip"></div>
            </div>
            <div class="Box5-col">
                <div class="Box5-pip"></div>
            </div>
            <div class="Box5-col">
                <div class="Box5-pip"></div>
                <div class="Box5-pip"></div>
            </div>
        </div>

        <div class="Box6">
            <div class="Box6-col">
                <div class="Box6-pip"></div>
                <div class="Box6-pip"></div>
                <div class="Box6-pip"></div>
            </div>
            <div class="Box6-col">
                <div class="Box6-pip"></div>
                <div class="Box6-pip"></div>
                <div class="Box6-pip"></div>
            </div>
        </div>

        <div class="Box7">
            <div class="Box7-col">
                <div class="Box7-pip"></div>
                <div class="Box7-pip"></div>
                <div class="Box7-pip"></div>
            </div>
            <div class="Box7-col center">
                <div class="Box7-pip"></div>
            </div>
            <div class="Box7-col">
                <div class="Box7-pip"></div>
                <div class="Box7-pip"></div>
                <div class="Box7-pip"></div>
            </div>
        </div>

        <div class="Box8">
            <div class="Box8-pip top-left"></div>
            <div class="Box8-pip top-center"></div>
            <div class="Box8-pip top-right"></div>
            <div class="Box8-pip middle-left"></div>
            <div class="Box8-pip middle-right"></div>
            <div class="Box8-pip bottom-left"></div>
            <div class="Box8-pip bottom-center"></div>
            <div class="Box8-pip bottom-right"></div>
        </div>

        <div class="Box9">
            <div class="Box9-col">
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
            </div>
            <div class="Box9-col">
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
            </div>
            <div class="Box9-col">
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
                <div class="Box9-pip"></div>
            </div>
        </div>
    </div>
</body>

</html>